<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MMS | Log in {:L('ADMIN_CENTER')}</title>
	
	<!-- Bootstrap -->
	<link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.min.css">
	<!-- Font Awesome -->
    <link rel="stylesheet" href="__TMPL__Public/assets/plugins/font-awesome-4.4.0/css/font-awesome.min.css" />
    <!-- xPopup -->
    <link rel="stylesheet" href="__PUBLIC__/xPopup/css/xpopup.css">
    <!-- Ionicons
    <link rel="stylesheet" href="./static/plugins/ionicons-2.0.1/css/ionicons.min.css" /> -->
    <!-- Theme style -->
    <link rel="stylesheet" href="__TMPL__Public/assets/css/AdminLTE.css" />
    <!-- jquery.validate -->
    <link rel="stylesheet" href="__PUBLIC__/jquery/jquery.validate/validate.css">
</head>
<body class="hold-transition page-login">
<div class="login-box">
  <div class="login-logo">
    <b>Moli-Magic System</b> MMS
  </div><!-- /.login-logo -->
  <div class="login-box-body">
    <form class="form-horizontal" id="loginForm">
		<div class="form-group">
			<div class="col-sm-12">
	        	<input type="text" class="form-control" id="username" name="username" placeholder="{:L('USERNAME_OR_EMAIL')}" value="{:cookie('ADMIN_USERNAME')}" />
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-12">
				<input type="password" class="form-control" id="password" name="password" placeholder="{:L('PASSWORD')}" value="123456" />
			</div>
      	</div>
		<div class="form-group">
			<div class="col-sm-12">
	          	<div class="input-group">
					<input type="text" class="form-control" id="verify" name="verify" placeholder="{:L('ENTER_VERIFY_CODE')}" />
	           		<div class="input-group-addon" style="padding:0;">
	           			{:sp_verifycode_img('length=4&font_size=16&width=100&height=32&use_noise=1&use_curve=0','style="cursor: pointer;" title="点击获取"')}
	           		</div>
				</div>
			</div>
      	</div>
		<div class="form-group no-margin-bottom">
			<div class="col-sm-12">
				<button type="button" class="btn btn-info btn-flat btn-block" id="signIn">{:L('LOGIN')}</button>
			</div>
		</div>
	</form>
  </div><!-- /.login-box-body -->
</div><!-- /.login-box -->

<!-- jquery -->
<script src="__PUBLIC__/jquery/jQuery-2.1.4.min.js"></script>
<!-- jquery.validate -->
<script src="__PUBLIC__/jquery/jquery.validate/jquery.validate.min.js"></script>
<!-- xPopup -->
<script src="__PUBLIC__/xPopup/js/xpopup.js"></script>
<!-- COMMON -->
<script src="__PUBLIC__/common.js"></script>

<script>
;(function(){
	var validator = $("#loginForm").validate({
		onfocusout: function(element) {
			$(element).valid();
		},
        rules: {
			username: "required",
			password: {
				required: true,
				minlength: 1
			}
        },
        messages: {
			username: "请输入用户名",
			password: {
		    	required: "请输入密码",
		    	minlength: "密码不能小于\{0\}个字 符"
			}
        }
    });
	
	// js监听回车键 
	document.onkeydown = function(e) {
		e = e ? e : window.event;
		var keyCode = e.which ? e.which : e.keyCode;
		if (keyCode == 13) {
	 		if (validator.form()) {
	 			login();
	 		}
		}
	}
	
	$('#signIn').off('click').on('click', function() {
 		if (validator.form()) {
 			login();
 		}
	});
})();


function login() {
	var url = "{:U('Login/doLogin')}";
	var distPath = '{:U("Index/index")}';
	
    var xloading = xpopup.loading();
	$.ajax({
        type: 'POST',
        url: url,
		data: {
			username : $('#username').val(),
			password : $('#password').val(),
			verify : $('#verify').val()
		},
        dataType: 'json',
		async: false,
        success: function (data) {
    		xloading.destroy();												// loading

    		if (data.code == 0) {
    			location.replace(distPath);									// Jump to the corresponding path
    		} else {
    			var xalert = xpopup.alert({
    				type : 'error',
    				title : '登录出错',
    				msg : data.msg,
    				buttons : [ {
    					id : 'btnOk',
    					text : 'OK',
    	                'class': 'btn btn-default btn-flat',
    					handler : function($this) {
    						$this.destroy();
    					}
    				}]
    			});
    		}
        },
		error: function (data) {
			kk.extError(data, xloading);
		}
    });
}
</script>
</body>
</html>